<template>
  <view class="report-detail" v-cloak>
    <view class="detail-header">
      <view class="header-list not-bar">
        <view class="list-item" v-for="(item,idx) in info.mpToothPositionInfoRes" :key="item.id" @click="handlePreImg(idx)">
          <image :src="item.toothUrl" mode="aspectFill" class="img"></image>
          <view class="item-footer">
            <view class="footer-span dot">{{item.toothName}}</view>
            <view class="footer-info" v-if="false">蛀牙</view>
          </view>
        </view>
      </view>
    </view>
    <template>
    <view class="home-tabs not-bar">
      <view class="tabs-item" :class="curTabs == idx?'active':''" v-for="(item,idx) in tabsList" :key="idx" @click="curTabs = idx">{{item}}</view>
    </view>
    
    <view class="detail-main" v-if="info.creportDoctorInfoRes">
      <view class="main-header">
        <view class="header-chat">
          <e-chart ref="gaugeRef" width="100%" height="220rpx" @ready="initGauge" />
          <view class="chat-info">口腔状态良好</view>
        </view>
        <view class="header-process">
          <view class="item">
            <GradientProgress style="flex:1" :progress="20" color1="#40db8b" color2="#ff4927">黄牙</GradientProgress>
            良好
          </view>
          <view class="item">
            <GradientProgress style="flex:1" :progress="60" color1="#40db8b" color2="#ff4927">畸形</GradientProgress>
            轻度
          </view>
          <view class="item">
            <GradientProgress style="flex:1" :progress="80" color1="#40db8b" color2="#ff4927">病变</GradientProgress>
            严重
          </view>
        </view>
      </view>
      <view class="main-info">临床上像病历陈述内容，是用镊子或口镜柄端叩击牙冠,根据患者的感觉来判断是否有病变。垂直叩诊可以检查根尖周组织的炎症,侧向叩诊可以检查牙周膜某一侧的炎症反应。临床上像病历陈述正常牙龈的颜色呈现粉红色,如果是其它颜色或者是牙龈红肿都是不正常的。牙齿上如果有黑洞或者牙齿变黑,说明可能有龋齿。</view>
      <view class="main-doctor">
        <view class="doctor-img">
          <image :src="info.creportDoctorInfoRes.avatar || '../static/doctor-default.png'" mode="aspectFill" class="img"></image>
          <image src="@/static/doctor/online.svg" class="img-status" mode="aspectFill"></image>
        </view>
        <view class="doctor-info">
          <view class="h2">陈一三 <span>{{info.creportDoctorInfoRes.jobTitle}}</span></view>
          <view class="p">{{info.creportDoctorInfoRes.orgName}}</view>
          <view class="p">{{info.creportDoctorInfoRes.workYear}}年从业经验 <span style="margin: 0 12rpx;font-size: 16rpx;">|</span> 100%好评</view>
        </view>
        <uni-icons type="right" size="14" color="#b0b0b0"></uni-icons>
      </view>
      <view class="main-button">
        对医生做出评价 <image src="@/static/doctor/edit-green.png" mode="aspectFill" class="icon"></image>
      </view>
    </view>
    <view class="detail-programme">
      <image src="@/static/doctor/top3.svg" mode="aspectFill" class="title"></image>
      <view class="programme-card">
        <view class="programme-list not-bar">
          <view class="list-item" v-for="item in 3" :key="item">
            <image src="@/static/gray.jpg" mode="aspectFill" class="img"></image>
            <view class="item-button">点击查看</view>
          </view>
        </view>
        <view class="programme-chat">
          <view class="chat">
            <e-chart ref="radarRef" width="100%" height="450rpx" style="padding: 0;margin: 0" @ready="initRadar" />
          </view>
          <view class="chat-circle">
            <view class="item"><image class="icon" src="@/static/doctor/radar-red.svg"></image>个人</view>
            <view class="item"><image class="icon" src="@/static/doctor/radar-blue.svg"></image>全部</view>
          </view>
          <view class="p">-您的检测结果随角度/光线不同有些许变化-</view>
        </view>
      </view>
    </view>
    <view class="detail-recommend">
      <image src="@/static/doctor/title.svg" mode="aspectFill" class="title"></image>
      <view class="recommend-list">
        <view class="list-item" v-for="item in 4" :key="item">
          <view class="item-title">已有1万人选择</view>
          <view class="h2 dot">美国3M·纳米树脂...</view>
          <view class="p">美白</view>
          <view class="var-button">点击查看</view>
        </view>
      </view>
    </view>
    <view class="detail-footer">
      <view class="footer-item">
        <view class="title">
          <image src="@/static/doctor/ya.png" mode="aspectFill" class="img"></image>
          牙龈炎
          <view class="title-span">指标说明</view>
        </view>
        <view class="item-imgs not-bar">
          <image v-for="item in 10" :key="item" src="@/static/gray.jpg" mode="aspectFill" class="img"></image>
        </view>
        <view class="item-info">临床上像病历陈述内容，是用镊子或口镜柄端叩击牙冠,根据患者的感觉来判断是否有病变。垂直叩诊可以检查根尖周组织的炎症。</view>
      </view>
    </view>
    </template>
    
    <view class="var-empty">
      <image src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/empty/empty.svg" mode="aspectFill" class="img"></image>
      <view class="h2">请等待..</view>
      <view class="p">您的Ai健康报告正在生成中</view>
    </view>
  </view>
</template>

<script>
  import GradientProgress from '@/components/gradient-progress/gradient-progress.vue'
  import eChart from "@/components/e-chart/components/e-chart/e-chart.vue"
  export default {
    components:{GradientProgress,eChart},
    data() {
      return {
        info:{},
        curTabs:0,
        tabsList:['总体齿分','牙龈炎','牙齿软垢','牙结石','吐舌'],
      };
    },
    onLoad(ops) {
      this.$get('/yahe/report/getReportInfoById',{id:ops.id},'1').then(res=>{
        if(res.code == '1'){
          this.info = res.content
        }
      })
    },
    methods:{
      initGauge() {
        this.$refs.gaugeRef.init({
          series: [
            {
              type: 'gauge',
              radius: '100%',
              startAngle: 180,
              endAngle: 0,
              min: 0,
              max: 100,
              splitNumber: 10,
              itemStyle: { color: '#41db8c' },
              progress: {
                width: 8,
                show: true,
                roundCap: true,
                itemStyle:{
                  color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#03c8f6' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#41db8c' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              },
              pointer: { show: false },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 8,
                }
              },
              axisTick:{
                show:false
              },
              splitLine: {
                  length: 5, // 缩短长度
                  lineStyle: {
                      width: 1
                  }
              },
              axisLabel: { show:false },
              detail: {
                valueAnimation: true,
                width: '60%',
                lineHeight: 40,
                borderRadius: 8,
                offsetCenter: [0, '-15%'],
                fontSize: 20,
                formatter: '{value}'
              },
              data: [{
                value: 20
              }]
            }
          ]
        });
      },
      initRadar(){
        this.$refs.radarRef.init({
          radar: {
            indicator: [
              { name: '黄牙', max: 100 },
              { name: '畸形', max: 100 },
              { name: '牙缝', max: 100 },
              { name: '牙结石', max: 100 },
              { name: '牙周炎', max: 100 },
              { name: '蛀牙', max: 100 },
              { name: '病变', max: 100 }
            ]
          },
          series: [
            {
              type: 'radar',
              data: [{
                value: [80, 60, 70, 50, 90, 40, 30],
                name: '个人',
                symbol: 'none',
                lineStyle: {
                  color: '#F26262'
                },
                areaStyle: {
                  color: 'rgba(235,66,66,0.16)'
                },
              },{
                value: [60, 40, 50, 30, 70, 20, 10],
                name: '全部',
                symbol: 'none',
                lineStyle: {
                  color: '#238DEA'
                },
                areaStyle: {
                  color: 'rgba(35,141,234,0.16)'
                },
              }]
            }
          ],
        })
      },
      handlePreImg(e){
        let urls = this.info.mpToothPositionInfoRes.map(item => item.toothUrl)
        uni.previewImage({
          urls,
          current:e
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.report-detail{
  min-height: 100vh;
  background: var(--page-bg);
  .detail-header{
    padding: 20rpx 0;
    .header-list{
      overflow-x: auto;
      padding-left: 24rpx;
      display: flex;
      align-items: center;
      .list-item{
        width: 144rpx;
        height: 144rpx;
        border-radius: 20rpx;
        overflow: hidden;
        margin-right: 12rpx;
        position: relative;
        .img{
          width: 100%;
          height: 100%;
        }
        .item-footer{
          position: absolute;
          bottom: 0;
          width: 100%;
          .footer-span{
            color: #fff;
            font-size: 18rpx;
            text-align: right;
            padding:4rpx 6rpx;
          }
          .footer-info{
            background: rgba(5,5,5,0.5);
            color: #fff;font-size: 22rpx;
            text-align: center;
            line-height: 36rpx;
          }
        }
      }
    }
  }
  
  .home-tabs{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding-left: 24rpx;
    overflow-x: auto;
    .tabs-item{
      font-size: 28rpx;
      color: #6D6D6D;
      position: relative;
      padding: 28rpx 0;
      margin-right: 44rpx;
      white-space: nowrap;
      &::after{
        position: absolute;
        display: block;
        content: '';
        width: 34rpx;
        height: 6rpx;
        background: transparent;
        bottom: 14rpx;
        left: 50%;
        transform: translate(-50%,0);
      }
      &.active{
        font-weight: bold;
        color: var(--theme-color);
      }
      &.active::after{
        background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
      }
    }
  } /// home-tabs end
  
  .detail-main{
    background: #fff;
    padding: 24rpx;
    .main-header{
      display: flex;
      align-items: center;
      position: relative;
      .header-chat{
        width: 260rpx;
        margin-top: auto;
        position: relative;
        .chat-info{
          position: absolute;
          bottom:40rpx;
          left: 50%;
          transform: translate(-50%,0);
          font-size: 22rpx;
          line-height: 1;
          padding: 6rpx 12rpx;
          border-radius: 50rpx;
          background: var(--theme-color);
          color: #fff;
          white-space: nowrap;
          text-align: center;
        }
      }
      .header-process{
        flex: 1;
        margin-left: auto;
        white-space: nowrap;
        .item{
          display:flex;
          align-items: center;
          font-size: 24rpx;
          color: var(--title-color);
          margin-bottom: 30rpx;
        }
      }
    }
    .main-info{
      background: #f0fefb;
      color: var(--title-color);
      line-height: 40rpx;
      padding: 24rpx;
      border: 2rpx solid #D9F4F2;
      font-size: 26rpx;
      border-radius: 28rpx;
      margin-bottom: 24rpx;
    }
    .main-doctor{
      display: flex;
      align-items: center;
      .doctor-img{
        width: 100rpx;
        height: 100rpx;
        position: relative;
        .img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        .img-status{
          width: 66rpx;
          height: 24rpx;
          border-radius: 24rpx;
          position: absolute;
          left: 50%;
          transform: translate(-50%,0);
          bottom: -12rpx;
        }
      }
      .doctor-info{
        flex: 1;
        margin-left: 20rpx;
        margin-right: auto;
        .h2{
          font-size: 28rpx;
          color: var(--title-color);
          font-weight: bold;
          span{
            line-height: 1;
            font-weight: 400;
            font-size: 18rpx;
            padding: 4rpx 8rpx;
            color: var(--theme-color);
            background: #F0FDFA;
            border-radius: 8rpx;
            margin-left: 6rpx;
            border: 2rpx solid #D9F4F2;
          }
        }
        .p{
          font-size: 22rpx;
          margin: 12rpx 0 0;
          color: #6D6D6D;
          display: flex;
          align-items: center;
        }
      }
    } //  main-doctor end
    .main-button{
      line-height: 80rpx;
      border-radius: 80rpx;
      color: var(--theme-color);
      border: 2rpx solid var(--theme-color);
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24rpx;
      .icon{
        width: 52rpx;
        height: 52rpx;
      }
    }
  }   //  detail-main end
  
  .detail-programme{
    margin-top: 69rpx;
    background: #fff;
    padding-top: 1rpx;
    .title{
      width: 392rpx;
      height: 82rpx;
      display: block;
      margin: -35rpx auto 0;
    }
    .programme-card{
      padding: 24rpx;
    }
    .programme-list{
      display: flex;
      overflow-x: auto;
      margin-bottom: 44rpx;
      .list-item{
        width: 226rpx;
        margin-right: 12rpx;
        border: 2rpx solid #EFEFEF;
        overflow: hidden;
        border-radius: 20rpx;
        .img{
          width: 100%;
          height: 193rpx;
        }
        .item-button{
          line-height: 52rpx;
          border-radius: 52rpx;
          color: var(--theme-color);
          border: 2rpx solid #D9F4F2;
          border-radius: 82rpx;
          margin: 20rpx 44rpx;
          font-size: 26rpx;
          text-align: center;
        }
      }
    }
    .programme-chat{
      text-align: center;
      .chat{
        width: 80vw;
        height: 450rpx;
        margin: 0 auto;
      }
      .chat-circle{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 28rpx;
        .item{
          display: flex;
          align-items: center;
          font-size: 20rpx;
          color: #6D6D6D;
          .icon{
            width: 16rpx;
            height: 16rpx;
            margin-right: 8rpx;
          }
          &:first-child{
            margin-right: 52rpx;
          }
        }
      }
      .p{
        font-size: 22rpx;
        color: #B0B0B0;
        margin-top: 24rpx;
      }
    }
  }  /// detail-programme end
  
  .detail-recommend{
    .title{
      width: 100vw;
      height: 88rpx;
      display: block;
    }
    .recommend-list{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 24rpx 24rpx 12rpx;
      background: #fff;
      .list-item{
        width: 345rpx;
        background: #F0FDFA;
        border-radius: 20rpx;
        border: 2rpx solid #D9F4F2;
        margin-bottom: 12rpx;
        text-align: center;
        box-sizing: border-box;
        padding-bottom: 20rpx;
        .item-title{
          margin: 0 76rpx;
          border-radius: 0rpx 0rpx 16rpx 16rpx;
          background: #D9F4F2;
          line-height: 48rpx;
          font-size: 24rpx;
          color: var(--theme-color);
        }
        .h2{
          font-size: 30rpx;
          color: var(--title-color);
          margin: 12rpx 0;
        }
        .p{
          font-size: 24rpx;
          margin: 0 0 12rpx;
          color: #B0B0B0;
        }
        .var-button{
          margin: 0 80rpx;
          font-size: 26rpx;
          line-height: 52rpx;
        }
      }
    }
  }  // detail-recommend end
  
  .detail-footer{
    margin-top: 20rpx;
    background: #fff;
    .footer-item{
      padding-left: 24rpx;
      padding-bottom: 24rpx;
      .title{
        display: flex;
        align-items: center;
        font-size: 30rpx;
        color: var(--title-color);
        font-weight: bold;
        line-height: 88rpx;
        .img{
          width: 36rpx;
          height: 36rpx;
          margin-right: 4rpx;
        }
        .title-span{
          line-height: 1;
          font-weight: 400;
          font-size: 18rpx;
          padding: 4rpx 8rpx;
          color: var(--theme-color);
          background: #F0FDFA;
          border-radius: 8rpx;
          margin-left: 20rpx;
          border: 2rpx solid #D9F4F2;
        }
      }
      .item-imgs{
        display: flex;
        overflow-x: auto;
        margin: 0 0 24rpx;
        .img{
          width: 144rpx;
          height: 144rpx;
          margin-right: 12rpx;
          border-radius: 20rpx;
          flex-shrink: 0;
        }
      }
      .item-info{
        line-height: 40rpx;
        color: var(--title-color);
        font-size: 26rpx;
      }
    } //  footer-item end
  }  ///  detail-footer end
  
  .var-empty{
    .img{
      width: 518rpx;
      height: 326rpx;
    }
  }
}
</style>
